<template>
	<view class="container" >
	<!-- 	<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs> -->
		<view class="top-view">
			<view class="top-view-title">
			<!-- {{goodsInfo['payStatusList'][goodsInfo['data']['pay_status']]['title']}} -->
			{{goodsInfo['data']['status_name']['title']}}
			</view>
			
			<view class="top-view-title-des" v-if="goodsInfo['data']['pay_status'] == 1 ">你的订单已成功支付</view>
			<view class="top-view-title-des" v-else>创建订单{{orderExpire}}分钟后订单关闭，请及时付款哦~</view>
		</view>
		 
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<view class="tui-order-item" >
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>
							<image :src="goodsInfo['userInfo']['imageurl']" class="tui-avatar"></image>
							{{goodsInfo['userInfo']['nickname']}}
						 </view>
						<!-- <view class="tui-order-status">已完成</view> -->
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false" :arrow="false" class="listCell">
					<view class="tui-goods-title colorLan" @click="details('../dragon/details?id='+goodsInfo.data.jielong_id+'&jielong_id='+goodsInfo.data.jielong_id+'&jielong_user_id='+goodsInfo.data.jielong_user_id)">
						<view> {{goodsInfo['jielongInfo']['title'] }}</view>
					</view>
				</tui-list-cell>
			
				<div class='goodsBox' @click="details('../dragon/details?id='+goodsInfo.data.jielong_id+'&jielong_id='+goodsInfo.data.jielong_id+'&jielong_user_id='+goodsInfo.data.jielong_user_id)">
					<block v-for="(item,index) in goodsInfo['goodsList']" :key="index">
						<tui-list-cell padding="0">
							<view class="tui-goods-item">
								<!-- <image src="/static/my/bg.png" class="tui-goods-img"></image> -->
								<view class="tui-goods-center">
									<!-- <view class="tui-goods-name">{{item.goods_name}}</view> -->
									<view class="tui-goods-name">{{item.goods_attr}} +{{item.goods_number}}</view>
									<!-- <view class="tui-goods-attr">黑色，50ml</view> -->
								</view>
								<view class="tui-price-right">
									<view>￥{{formatPrice(item.goods_price * item.goods_number)}}</view>
									<!-- <view>x2</view> -->
								</view>
							</view>
						</tui-list-cell>
					</block>
				</div>
				
				<tui-list-cell v-if="goodsInfo['data']['amount'] != goodsInfo['data']['real_amount']" :hover="false" :last="true">
					<view class="tui-goods-price">
						<view>总合计:</view>
						<view class="tui-price-large">￥{{formatPrice(goodsInfo['data']['real_amount'])}}</view>
					</view>
				</tui-list-cell>
				
				<!-- <tui-list-cell v-if="goodsInfo['data']['amount'] != goodsInfo['data']['real_amount']" :hover="false" :last="true">
					<view class="tui-goods-price">
						<view>满立减优惠:</view>
						<view class="tui-price-large" style="margin-left: 10rpx;">-￥{{formatPrice(goodsInfo['data']['discount_amount'])}}</view>
					</view>
				</tui-list-cell> -->
				
				<!-- <tui-list-cell v-if="goodsInfo['data']['amount'] == goodsInfo['data']['real_amount']" :hover="false" :last="true">
					<view class="tui-goods-price">
						<view>合计:</view>
						<view class="tui-price-large">￥{{formatPrice(goodsInfo['data']['amount'])}}</view>
					</view>
				</tui-list-cell>
				
				<tui-list-cell v-else :hover="false" :last="true">
					<view class="tui-goods-price">
						<view>实际付款:</view>
						<view class="tui-price-large">￥{{formatPrice(goodsInfo['data']['real_amount'])}}</view>
					</view>
				</tui-list-cell> -->
			</view>
			
			
			
		</view>
		<view class="tui-order-list-name">
			<tui-list-view  color="#777" class="tui-list-view">
				<tui-list-cell :hover="false">
					<view class="headziti">收件人：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['name']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="headziti">手机号：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['mobile']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="headziti">收货地址：</view><view class="font-size_neirong">{{goodsInfo['data']['shipping_param']['area_name']}} {{goodsInfo['data']['shipping_param']['address']}}</view>
				</tui-list-cell>
				
			<!-- 	<tui-list-cell class="order_delivery" :hover="false" v-for="(item,index) in goodsInfo['data']['express_info']" :key="index">
					<view class="font-size" style="width: 70%;float: left;overflow: hidden;text-orientation: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{item.delivery_name}}：{{item.waybill_id?item.waybill_id:''}}</view>
					<view class="font-size delivery_name" @click="details('../my/couriernumber?waybill_id='+item.waybill_id+'&delivery_id='+item.delivery_id+'&delivery_name='+item.delivery_name)">查看物流</view>
				</tui-list-cell> -->
				<tui-list-cell :hover="false" v-for="(item,index) in goodsInfo['data']['express_info']" :key="index">
					<view class="headziti">{{item.delivery_name}}：</view>
					<view class="font-size_neirong">{{item.waybill_id?item.waybill_id:''}}<text class="font-size_neirong delivery_name" style="margin-left: 10rpx;" @click="details('../my/couriernumber?waybill_id='+item.waybill_id+'&delivery_id='+item.delivery_id+'&delivery_name='+item.delivery_name)">查看物流</text></view>
				</tui-list-cell>
			</tui-list-view>
		</view>
		
		<view class="tui-order-list-name" style="padding-bottom: 280rpx;">		
			<tui-list-view  color="#777" class="tui-list-view">
				<tui-list-cell :hover="false" class="font-size">
					<view class="headziti">订单号：</view><view class="font-size_neirong">{{goodsInfo['data']['order_sn']}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" class="font-size">
					<view class="headziti">下单时间：</view><view class="font-size_neirong">{{formatTime(goodsInfo['data']['create_time'])}}</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" class="font-size" v-if="goodsInfo['data']['pay_time'] > 0">
					<view class="headziti">支付时间：</view><view class="font-size_neirong">{{goodsInfo['data']['pay_time'] > 0?formatTime(goodsInfo['data']['pay_time']):''}}</view>
				</tui-list-cell>
				<tui-list-cell v-if="goodsInfo['data']['remark']" :hover="false" class="font-size">
					<view class="headziti">个人备注：</view><view class="font-size_neirong">{{goodsInfo['data']['remark']}}</view>
				</tui-list-cell>
				<tui-list-cell v-if="goodsInfo['data']['merchant_remark']" :hover="false" class="font-size">
					<view class="headziti">商家备注：</view><view class="font-size_neirong" style="color: #07c160;">{{goodsInfo['data']['merchant_remark']}}</view>
				</tui-list-cell>
			</tui-list-view>
		</view>		
		
		<!--底部操作栏-->
		<!-- v-if="item.status == 1 &&  item.pay_status == 3 && item.pay_open == 1" -->
		<view class="tui-operation" v-if="goodsInfo['data']['refund_status'] == 3">
			<!-- <view class="button-order"  @click="show('order/hide','确定删除该订单吗？')" >
				删除订单
			</view> -->
			<!-- <view class="button-order" v-if="goodsInfo['data']['shipping_status'] == 3 && goodsInfo['data']['refund_status'] == 3 && goodsInfo['data']['settle_status'] == 1" @click="que_reb(goodsInfo['data']['order_id'])" >
				申请退款
			</view> -->
			<view class="button-order"  @click="show('order/cancel','确定取消该订单吗？')" v-if="goodsInfo['data']['pay_status'] == 3 && goodsInfo['data']['status'] == 1">
				取消订单
			</view>
		</view>
		<!--底部操作栏-->
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" title="提示" :content="tip"></tui-modal>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	// import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	// import tuiLoadmore from "@/components/loadmore/loadmore"
	// import tuiNomore from "@/components/nomore/nomore"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiModal from "@/components/modal/modal"
	import tuiToast from "@/components/extend/toast/toast"
	
	// import tuiSticky from "@/components/sticky/sticky"
	export default {
		components: {
			// tuiTabs,
			tuiButton,
			// tuiLoadmore,
			// tuiNomore,
			tuiListCell,
			tuiModal,
			tuiToast
			// tuiSticky
		},
		data() {
			return {
				tip: '确定取消该订单吗？',
				pageIndex: 1,
				goodsInfo: {data:{amount:0,status_name:{title:'待支付',}}},
				parm: {},
				orderExpire: 30,
				modal:false,
				url : 'order/cancel'
			}
		},
		onLoad:function(option){
			this.parm = option
			// this.loadData();
			if(uni.getStorageSync('userInfo')){
				this.loadData();
			}else{
				setTimeout(() => {
					if(uni.getStorageSync('userInfo')){
						this.loadData();
					}
				}, 4000);
			}
			let config = uni.getStorageSync('publicConif');
			this.orderExpire = config['order_expire'] / 60;
			// 禁止转发
			wx.hideShareMenu();
		},
		methods: {
			phonecall: function(e){
				console.log(e);
				wx.makePhoneCall({
					phoneNumber: e,
				})
			},
			application: function(orderid){
				var thal = this;
				wx.getSetting({
					'withSubscriptions' : true,
					success(res) {
						console.log(res);
						if(res.subscriptionsSetting){
							let itemSettings = res.subscriptionsSetting.itemSettings;
							if (itemSettings['2Tjuw0Z0RJ1enuB8q9NlqvQURVaAR3ALB3HGU7nsOx0']) {
								if (itemSettings['2Tjuw0Z0RJ1enuB8q9NlqvQURVaAR3ALB3HGU7nsOx0'] == 'accept') {
									return true;
								}else{
									return false;
								}
							}else{
								return false;
							}
						}else{
							return false;
						}
					}
				})
				
				// let thal = this;
			},
			// 退款订阅消息
			sendMsg:function(orderid){
			    var thal = this
			    wx.requestSubscribeMessage({
			      tmplIds: ["2Tjuw0Z0RJ1enuB8q9NlqvQURVaAR3ALB3HGU7nsOx0"],
			      success(res) {
			        console.log(res)
			        if (res["2Tjuw0Z0RJ1enuB8q9NlqvQURVaAR3ALB3HGU7nsOx0"] == 'accept') {
						// console.log('用户同意了')
						thal.applyfor_order(orderid);
			        }else{
						thal.applyfor_order(orderid);
					}
			      },
			      fail(err) {
			        //失败
					thal.applyfor_order(orderid);
			        console.error(err);
			      }
			    });
				// that.payment();
			},
			que_reb: function(orderid){
				var thal = this;
				
				wx.showModal({
					title: '确认要申请退款吗！',
					content: '提交退款后，需要等到团长审核',
					success(res) {
						if (res.confirm) {
							if(typeof wx.requestSubscribeMessage === 'function'){
								// if(thal.application() == true){
								// 	thal.applyfor_order(orderid);
								// }else{
									thal.sendMsg(orderid);
								// }
							}else{
								wx.showModal({
									title: '提示！',
									content: '微信版本过低，订阅功能无法使用哦！',
									success(res_versions) {
										if (res_versions.confirm) {
											thal.applyfor_order(orderid);
										} else if (res_versions.cancel) {
											thal.applyfor_order(orderid);
										}
									}
								})
							}
							// thal.sendMsg(orderid);
							// thal.applyfor_order(orderid);
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			applyfor_order: function(orderid){
				this.tui.request('order/refundCheck',
					{
						order_id:orderid,
					}
				).then((res) => {
					wx.showToast({
						title: '退款申请成功',
						icon: 'success',
						duration: 2000
					})
					this.loadData();
				}).catch((err) => {
					console.log('err', err)
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			duplication: function(waybill_id){
				wx.setClipboardData({
					data: waybill_id,
					success: function (res) {
						wx.hideLoading();
						wx.showModal({
							title: '提示',
							content: '单号复制成功',
							showCancel: false
						});
					}
				})
			},
			details: function(url,type){
				if(!url){
					return false;
				}
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				// var pages = getCurrentPages();
				// var beforePage = pages[pages.length - 2];
				// // 调用列表页的获取数据函数
				// beforePage.loadData();
				uni.navigateTo({
				   url: url,
				});
			},
			handleClick: function(e) {
				let index = e.index;
				if (index === 0) {
					// this.tui.toast("你点击了取消按钮")
				} else {
					this.orderCancel();
					// this.tui.toast("你点击了确定按钮")
				}
				this.hide()
			},
			
			hide: function(){
				this.modal = false
			},
			show: function(data,Dtip) {
				this.modal = true
				this.url = data
				this.tip = Dtip
				
			},
			formatTime: function(timestamp){
				if(!timestamp){
					return false
				}
				return dataTime.formatDate('y-m-d h:i',timestamp);
			},
			orderCancel: function(){
				this.tui.request(this.url, this.parm).then((res) => {
					if(res.code == '0000'){
						wx.navigateBack({
						  delta: -1
						})
						let params = {
							title: '操作成功',
							imgUrl: "/static/toast/check-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
						setTimeout(() => {
							uni.redirectTo({
							   url: './order?tab='+this.parm.tab,
							});
						}, 200);
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
					}					
					
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			loadData: function(){
				this.tui.request('order/details', this.parm).then((res) => {
					console.log(res['data']);
					if(res['data']['shipping_param']){
						res['data']['shipping_param']  = JSON.parse(res['data']['shipping_param']);
					}
					if(res['jielongInfo']['shipping_network']){
						res['jielongInfo']['shipping_network']  = JSON.parse(res['jielongInfo']['shipping_network']);
					}
					if(res['data']['express_info']){
						res['data']['express_info']  = JSON.parse(res['data']['express_info']);
					}
					this.goodsInfo = res
				}).catch((err) => {
					console.log('err', err)
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			formatPrice: function(fee){
				return this.tui.centsToYuan(fee)
			},
		},
	}
</script>

<style>
	/* 自提点 */
	.bottom_ztd{
		width: 200rpx;
		float: right;
		margin-bottom: 0rpx !important;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.top_ztd{
		padding: 20rpx;
		height: 50rpx;
	}
	.list_networkList{
		width: 100%;
		border-bottom: 1rpx solid #CFCFCF;
		height: 290rpx;
		background: #FFF;
		/* padding-left: 30rpx; */
	}
	.list_left{
		width: 15%;
		line-height: 105rpx;
		text-align: center;
		float: left;
	}
	.list_details{
		width: 90%;
		float: left;
		height: 290rpx;
		font-size: 25rpx;
		padding-left: 30rpx;
	}
	.list_right{
		width: 10%;
		float: left;
		height: 290rpx;
		line-height: 250rpx;
	}
	.list_tops{
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 24rpx;
	}
	.list_bottom{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #666;
	}
	.name_networkList{
		float: left;
		width: 290rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 36rpx;
		font-weight: 500;
	
	}
	.phone_networkList{
		float: left;
		width: 210rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title_networkList{
		float: left;
		width: 125rpx;
		/* text-align: center; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.address_networkList{
		float: left;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	/* 自提点 */
	
	.tui-list-cell{
		display: block !important;
	}
	
	.tui-cell-class{
		padding: 10rpx 30rpx !important;
		font-size: 28rpx !important;
	}
	
	.headziti{
		color: #CCC;
		width: 180rpx !important;
		float: left;
	}
	
	.telephone{
		width: 35rpx;
		height: 35rpx;
		float: left;
		margin-right: 10rpx;
		margin-top: 3rpx;
	}
	
	.font-size-phone{
		color: #1193E3;
		margin-left: 10rpx;
	}
	
	.container{
		padding-bottom: 400rpx;
	}
	
	.top-view{
		background: #1193e3;
		height: 180rpx;
		color: #FFFFFF;
		padding: 65rpx 0rpx 0rpx 70rpx;

	}
	.top-view-title{
		font-size: 40rpx;
		font-weight: 500;
	}
	.top-view-title-des{
		font-size: 28rpx;
		margin-top: 20rpx
	}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
/* 	.tui-tabs-active{
		color: #0C83CC !important;
		font-weight: 400;
	}
	.tui-tabs-slide{
		background: #0C83CC !important;
	} */
	.tui-order-list {
		margin-top: 80rpx;
	}
	.tui-order-list-name{
		margin-top: 30rpx;
	}
	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background: #FFFFFF;
	}
	.colorLan{
		color: #0a8fe2 !important;
		font-size: 35rpx !important;
		font-weight: 500 !important;
		
	}
	.tui-goods-title {
		width: 100%;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		/* max-width: 450rpx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		line-height: 34rpx;
		color: #666;
		float: left;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 28rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 30rpx;
		font-weight: 450;
	}
	
	.tui-price-large {
		font-size: 32rpx;
		/* line-height: 30rpx; */
		/* font-weight: 500; */
		color: red;
	}
/* 
	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
 */
	.tui-btn-ml {
		margin-left: 20rpx;
	}
	.tui-avatar{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.listCell .tui-list-cell::after{
		border-bottom: 1rpx solid #FFFFFF;
	}
	.font-size{
		font-size: 28rpx !important;
		font-weight: 400;
		/* max-width: 450rpx;
		float: left; */
	}
	
	.font-size_neirong{
		font-size: 28rpx !important;
		font-weight: 400;
		max-width: 450rpx;
		float: left;
	}
	
	
	/*底部操作栏*/	
	.tui-operation {
		z-index: 999;
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		/* background: red; */
		position: fixed;
		display: flex;
		align-items: center;
		justify-content:flex-end;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	}
	.button-order{
		font-size: 30rpx;
		border: 1rpx solid #ff1919;
		padding: 10rpx 25rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		color: #ff1919;
	}
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	/*底部操作栏*/
	.goodsBox{
		border-bottom: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
		padding: 30rpx 0rpx;
		width: 95%;
		margin: 0px auto;
	}
	.tui-red{
		background: #0A8FE2 !important;
	}
	
	.tui-red-outline {
		color: #0A8FE2 !important;	
	}
	.tui-red-outline::after {
		border: 1px solid #0A8FE2 !important;
	}
	.tui-list-cell::after{
		border-bottom: none !important;
	}
	.order_delivery .tui-list-cell{
		display: block;
		height: 100rpx;
		width: 100%;
	}
	.delivery_name{
		color: #1193E3;
		float: right;
	}
</style>
